﻿
@{
    ViewBag.Title = "PerformanceIndicator";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<script src="@SiteUrl.GetStaticResourceScriptUrl("~/js/highcharts/highcharts.js")"></script>
<script src="@SiteUrl.GetStaticResourceScriptUrl("~/js/highcharts/modules/exporting.js")"></script>
<style type="text/css">
    #perIndicatortable {
        width: 100%;
        text-align: center;
        border-spacing: 1px;
        background-color: white;
        border: 1px solid;
    }

        #perIndicatortable th, #perIndicatortable td {
            text-align: center;
            height: 30px;
            border: 1px solid;
        }
</style>
<table class="form">
    <tr>
        <th class="formTitle">年份</th>
        <td class="formValue">
            <input id="year" type="text" class="form-control input-wdatepicker" value="@DateTime.Now.ToString("yyyy")" onfocus="WdatePicker({ dateFmt: 'yyyy', onpicking: dateChange})" />
        </td>
        <td colspan="4"></td>
    </tr>
</table>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<input class="form-control btn btn-default" id="reset" type="button" value="重置" style="width: 50px;height: 25px;position: relative;top: -45px;right: -1050px;display:none">
<table id="perIndicatortable" cellspacing="10">
    <thead>
        <tr>
            <th id="thyear"></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>

<script>
    var perIndicatorObj = [];
    for (i = 0; i < 12; i++) {
        perIndicatorObj.push({ zrc: 0, pjrc: 0 });
    }
    function aaaaaa(orgId, year) {
        if (orgId == "") {
            perIndicatorObj = [];
            for (i = 0; i < 12; i++) {
                perIndicatorObj.push({ zrc: 0, pjrc: 0 });
            }
            ShowChart();
            $.modalAlert("请选择医疗机构", 'warning');
            return;
        }
        $.ajax({
            url: "/Echarts/SelectPerformanceIndicator?r=" + Math.random() + "&orgId=" + orgId + "&year=" + year,
            dataType: "json",
            async: false,
            success: function (data) {
                if (data) {
                    perIndicatorObj = data;
                }
            }
        });
    }

    //请求
    aaaaaa($('#OrganizeId').val(), $('#year').val());
    //图表
    ShowChart();

    function dateChange(dp) {
        var year = dp.cal.getNewDateStr();
        //请求
        aaaaaa($('#OrganizeId').val(), year);
        //图表
        ShowChart();
    }

    function ShowChart() {
        $('#container').highcharts({
            credits: { enabled: false },
            chart: {
                zoomType: 'xy'
            },
            title: {
                text: 'Performance Indicator'
            },
            subtitle: {
                text: 'Source: GRS-Bainuo'
            },
            xAxis: [{
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                crosshair: true,
            }],
            yAxis: [{ // Primary yAxis
                crosshair: true,
                labels: {
                    format: '{value}',   //总人次
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: '总人次',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: '平均人次',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                labels: {
                    format: '{value}',   //平均人次
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true,
                animation: true,
                shadow: true,
            },
            legend: {
                //layout: 'vertical',
                //align: 'left',
                //x: 120,
                //verticalAlign: 'top',
                //y: 100,
                //floating: true,
                //backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                align: 'center',
                verticalAlign: 'bottom',
                x: 0,
                y: 0
            },
            series: [{
                name: '总人次',  //总人次
                type: 'column',
                color: Highcharts.getOptions().colors[0],
                data: [perIndicatorObj[0].zrc, perIndicatorObj[1].zrc, perIndicatorObj[2].zrc, perIndicatorObj[3].zrc, perIndicatorObj[4].zrc, perIndicatorObj[5].zrc, perIndicatorObj[6].zrc, perIndicatorObj[7].zrc, perIndicatorObj[8].zrc, perIndicatorObj[9].zrc, perIndicatorObj[10].zrc, perIndicatorObj[11].zrc],
                tooltip: {
                    valueSuffix: '' //单位
                },
                events: {
                    click: function (e) {
                        //$('#container').css("display", "none");
                        //$('#monthcontainer').css("display", "block");
                        $('#reset').css("display", "block");
                        LoadMonthChart(e.point.x);
                    }
                }
            },
            {
                name: '平均人次',   //平均人次
                type: 'spline',
                color: Highcharts.getOptions().colors[6],
                yAxis: 1,
                data: [perIndicatorObj[0].pjrc, perIndicatorObj[1].pjrc, perIndicatorObj[2].pjrc, perIndicatorObj[3].pjrc, perIndicatorObj[4].pjrc, perIndicatorObj[5].pjrc, perIndicatorObj[6].pjrc, perIndicatorObj[7].pjrc, perIndicatorObj[8].pjrc, perIndicatorObj[9].pjrc, perIndicatorObj[10].pjrc, perIndicatorObj[11].pjrc],
                tooltip: {
                    valueSuffix: '' //单位
                },
                events: {
                    click: function (e) {
                        //$('#personcntchart').css("display", "none");
                        //$('#monthcntchart').css("display", "block");
                        $('#reset').css("display", "block");
                        LoadMonthChart(e.point.x);
                    }
                }
            }],

        });
        if ($('#tr_zrc').html()) {
            $('#tr_zrc').remove();
        }
        if ($('#tr_pjrc').html()) {
            $('#tr_pjrc').remove();
        }
        $('#thyear').html($('#year').val());
        var str = "<tr id='tr_zrc'><td>总人次</td>";
        for (i = 0; i < 12; i++) {
            str += "<td>" + perIndicatorObj[i].zrc + "</td>";
        }
        str += "</tr>";
        $('#tbody').append(str);

        var str = "<tr id='tr_pjrc'><td>平均人次</td>";
        for (i = 0; i < 12; i++) {
            str += "<td>" + perIndicatorObj[i].pjrc + "</td>";
        }
        str += "</tr>";
        $('#tbody').append(str);

    }

    function LoadMonthChart(month) {
        month++;
        var orgId = $('#OrganizeId').val();
        var year = $('#year').val();
        if (orgId == "") {
            $.modalAlert("请选择医疗机构", 'warning');
            return;
        }
        $.ajax({
            url: "/Echarts/PerformanceMonthIndicator?r=" + Math.random() + "&orgId=" + orgId + "&year=" + year + "&month=" + month,
            dataType: "json",
            async: false,
            success: function (data) {
                if (data != null && data != null) {
                    GetMonthNumChart(data, month);
                }
            }
        });
    }

    function GetMonthNumChart(data, month) {
        var rtnobj = mGetDate(data, month);
        $('#container').highcharts({
            credits: { enabled: false },
            chart: {
                zoomType: 'none'
            },
            title: {
                text: 'Performance Indicator'
            },
            subtitle: {
                text: new Date().getFullYear() + '年' + month + "月人次统计"
            },
            xAxis: [{
                categories: rtnobj.str,
                crosshair: true,
            }],
            yAxis: [{ // Primary yAxis
                crosshair: true,
                labels: {
                    format: '{value}',   //总人次
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: '总人次',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: '平均人次',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                labels: {
                    format: '{value}',   //平均人次
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true,
                animation: true,
                shadow: true,
            },
            legend: {
                align: 'center',
                verticalAlign: 'bottom',
                x: 0,
                y: 0
            },
            series: [{
                name: '总人次',  //总人次
                type: 'column',
                color: Highcharts.getOptions().colors[0],
                data: rtnobj.zrc,
                tooltip: {
                    valueSuffix: '' //单位
                }
            },
            {
                name: '平均人次',   //平均人次
                type: 'spline',
                color: Highcharts.getOptions().colors[6],
                yAxis: 1,
                data: rtnobj.pjrc,
                tooltip: {
                    valueSuffix: '' //单位
                }
            }],

        });
        if ($('#tr_zrc').html()) {
            $('#tr_zrc').remove();
        }
        if ($('#tr_pjrc').html()) {
            $('#tr_pjrc').remove();
        }
        $('#thyear').html($('#year').val());
        var str = "<tr id='tr_zrc'><td>总人次</td>";
        for (i = 0; i < 12; i++) {
            str += "<td>" + perIndicatorObj[i].zrc + "</td>";
        }
        str += "</tr>";
        $('#tbody').append(str);

        var str = "<tr id='tr_pjrc'><td>平均人次</td>";
        for (i = 0; i < 12; i++) {
            str += "<td>" + perIndicatorObj[i].pjrc + "</td>";
        }
        str += "</tr>";
        $('#tbody').append(str);
    }

    var weekday = new Array(7)
    weekday[0] = "日"
    weekday[1] = "一"
    weekday[2] = "二"
    weekday[3] = "三"
    weekday[4] = "四"
    weekday[5] = "五"
    weekday[6] = "六"

    function mGetDate(data, month) {
        var rtnobj = {};
        rtnobj.str = [];
        rtnobj.pjrc = [];
        rtnobj.zrc = [];
        var date = new Date();
        var year = date.getFullYear();
        var d = new Date(year, month, 0);
        var d = d.getDate();
        var currentdate = year + '-' + (month < 10 ? ('0' + month) : month);
        for (var i = 1; i < (d + 1); i++) {
            var currenttime = currentdate + '-' + (i < 10 ? ('0' + i) : i);
            rtnobj.str.push(i + " " + weekday[new Date(currenttime).getDay()]);
            var isPush = false;
            $.each(data, function (i, v) {
                if (v.col == currenttime) {
                    rtnobj.pjrc.push(v.pjrc);
                    rtnobj.zrc.push(v.zrc);
                    isPush = true;
                }
            });
            if (!isPush) {
                rtnobj.pjrc.push(0);
                rtnobj.zrc.push(0);
            }
        }
        return rtnobj;
    }

    $('#reset').click(function () {
        //$('#container').css("display", "block");
        //$('#monthcontainer').css("display", "none");
        $('#reset').css("display", "none");
        aaaaaa($('#OrganizeId').val(), $('#year').val());
        ShowChart();
    });
</script>

<script type="text/javascript">
    function funcOrganizeIdChange() {
        //请求
        aaaaaa($('#OrganizeId').val(), $('#year').val());
        //图表
        ShowChart();

    }
</script>
@Html.Partial("_ReportOrganizeIdDDLSearchView")